<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>

    <title>竞赛信息统计页面</title>

    <div th:replace="common/common.html :: common_resource"></div>

    <!-- 引入可视化界面 -->
    <script th:src="@{/js/echarts.min.js}"></script>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>欢迎页面</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="team_list.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                    </div>
                </div>
                <!-- 统计 -->
                <div class="ibox-content" >
                    <div class="table-responsive" style="margin-bottom:10px">
                        <div class="col-sm-6 m-b-xs">
                            <tr>
                                <td>
                                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                    <div id="main" style="width:600px;height:600px;float:left"></div>
                                </td>
                            </tr>
                        </div>
                        <div class="col-sm-6 m-b-xs">
                            <tr>
                                <td>
                                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                    <div id="main2" style="width:800px;height:600px;float:right"></div>
                                </td>
                            </tr>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    // 显示标题，图例和空的坐标轴
    myChart.setOption({
        title: {
            text: '竞赛统计'
        },
        tooltip: {},
        legend: {
            data:['种类']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '种类',
            type: 'pie',
            radius: '55%',
            data: [],
            itemStyle: {
                normal: {
                    shadowBlur: 100,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                }
            }
        }]
    });

    myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/echarts/echartsNow",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                myChart.hideLoading();    //隐藏加载动画
                myChart.setOption({        //加载数据图表
                    // xAxis: {
                    //   data: names
                    // },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '种类',
                        data: result
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>
<script type="text/javascript">
    var myChart2 = echarts.init(document.getElementById('main2'));
    // 显示标题，图例和空的坐标轴
    myChart2.setOption({
        title: {
            text: '竞赛统计'
        },
        tooltip: {},
        xAxis: {
            data:['特等奖','一等奖','二等奖','三等奖','优秀奖','未获奖']
        },
        yAxis: {},
        series: [{
            name: '竞赛获奖类别',
            type: 'bar',
            data: [],
        }]
    });

    myChart2.showLoading();    //数据加载完之前先显示一段简单的loading动画

    $.ajax({
        type : "post",
        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/echarts/echartsNowSo",    //请求发送到TestServlet处
        data : {},
        dataType : "json",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (result) {
                myChart2.hideLoading();    //隐藏加载动画
                myChart2.setOption({        //加载数据图表
                    // xAxis: {
                    //   data: names
                    // },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '竞赛获奖类别',
                        data: result
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    })
</script>

</body>
</html>
